<template>
  <a-card :bordered="false">
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px">
      <span style="font-size: 18px;color:#000000;font-weight: bold;margin-top: 5px">入库单编号：{{rukudan_code}}</span><br/>
      <span style="color: #959292;margin-top: 10px">操作人：{{create_By}}</span>
      <span style="color: #959292;margin-left: 20px;margin-top: 10px">创建时间：{{create_time}}</span>
    </div>

    <!--仓库信息-->
    <div style="width: auto;padding-left: 16px">
      <span style="font-size: 14px;color:#000000;font-weight: bold;margin-top: 5px">仓库信息</span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;margin-top: 16px">
      <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        仓库名称：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{cangku_name}}
      </span>
      <span style="margin-left:56px;color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        联系人：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{cangku_userName}}
      </span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;">
       <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        联系电话：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{cangku_phone}}
      </span>
      <span style="margin-left:70px;color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        地址：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{cangku_address}}
      </span><br/>
    </div>


    <!--采购信息-->
    <div style="width: auto;padding-left: 16px;margin-top: 20px">
      <span style="font-size: 14px;color:#000000;font-weight: bold;margin-top: 5px">采购信息</span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;margin-top: 16px">
      <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        采购部门：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{caigou_depart}}
      </span>
      <span style="margin-left:56px;color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        负责人姓名：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{caigou_username}}
      </span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;">
       <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        联系电话：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{caigou_phone}}
      </span>
      <span style="margin-left:70px;color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        备注：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{caigou_remark}}
      </span><br/>
    </div>
    <div style="margin-top: 20px;padding-left: 16px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">上传附件：</span>
      <img :src="caigou_fileList" width="160px" height="100px">
<!--      <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--        <j-image-upload class="avatar-uploader" text="上传" v-model="caigou_fileList" style="margin-top: 8px;"></j-image-upload>-->
<!--      </a-form-item>-->
    </div>

    <!--检验信息录入-->
    <div style="width: auto;padding-left: 16px;margin-top: 10px">
      <span style="font-size: 14px;color:#000000;font-weight: bold;margin-top: 5px">检验信息</span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;margin-top: 16px">
      <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        负责人姓名：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        {{check_username}}
      </span>
      <span style="margin-left:56px;color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        联系电话：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
         {{check_phone}}
      </span><br/>
    </div>
    <div style="width: auto;margin-bottom: 10px;padding-left: 16px;">
       <span style="color: #959292;background-color: #f2f2f2;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
        备注：
      </span>
      <span style="color: #959292;background-color: #ffffff;padding-left: 12px;padding-right: 12px;padding-top: 5px;padding-bottom: 5px">
         {{check_remark}}
      </span>
    </div>
    <div style="margin-top: 20px;padding-left: 16px">
      <span style="color: #ffffff;margin-right: 2px">*</span>
      <span style="color: #5f5e5e;width: 100px">上传附件：</span>
      <img :src="check_fileList" width="160px" height="100px">
<!--      <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--        <j-image-upload class="avatar-uploader" text="上传" v-model="check_fileList" style="margin-top: 8px;"></j-image-upload>-->
<!--      </a-form-item>-->
    </div>

    <!--下面区域-->
    <div style="background: #f2f2f2;height: 12px;width: auto;margin-top: 16px;margin-bottom: 10px;padding-left: 16px">
    </div>
    <div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 28px;">
        <span style="font-size: 16px;float: left;color:#000000;font-weight: bold;margin-bottom: 10px">入库项列表</span>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange" v-show="this.tabs==1" style="margin-top: -20px;">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.img)" icon="img"/>
          </div>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <div align="center" style="align-content: center;margin-left: 0px;">
<!--          <a @click="set_reservoir(record.id)" style="float: left;margin-left: 22px;font-size: 14px;color: #d29328;">查看详情</a>-->

          <a-menu-item style="margin-left: 10px;float: left;margin-top: 0px;" v-show="record.status==0">
            <a-popconfirm title="确定确认入库该项吗?" @confirm="() => edit_data_status(record.id,1)">
              <a style="font-size: 14px;color: #d29328;">确认入库</a>
            </a-popconfirm>
          </a-menu-item>

            <a-menu-item style="margin-left: 10px;float: left;margin-top: 0px;" v-show="record.status==1">
            <a-popconfirm title="确定撤销该入库项吗?" @confirm="() => edit_data_status(record.id,2)">
              <a style="font-size: 14px;color: #d29328;">撤销</a>
            </a-popconfirm>
          </a-menu-item>

          </div>
        </span>
      </a-table>
    </div>



    <div style="background: #f2f2f2;height: 8px;width: auto;margin-top: 28px;margin-bottom: 10px;padding-left: 16px">
    </div>
    <div style="width: auto;padding-left: 16px">
      <span style="font-size: 14px;color:#000000;font-weight: bold;margin-top: 5px">入库结果</span><br/>
    </div>
    <div>
      <div style="float: left;padding-left: 16px">
        <a-textarea placeholder="请输入备注" v-model="data_remark" rows="3" style="width: 450px;margin-top: 5px"/>
      </div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 8px;float: right;margin-right: 16px;margin-top: 36px">
        <a-button type="primary" @click="finish_instorageDan" style="color: #F9D532;width: 100px;height: 32px;background: #333333;border-style: none;font-size: 12px" v-show="this.rukudan_status!=2">完成入库</a-button>
        <a-button @click="back_top" style="color: #333333;width: 100px;height: 32px;background: #dcdada;border-style: none;font-size: 12px;margin-left: 10px">关闭</a-button>
      </div>
    </div>


    <AddrukuDanGoodsModule ref="modalForm" @ok="modalFormOk"></AddrukuDanGoodsModule>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {putAction,getAction,postAction,getFileAccessHttpUrl,httpAction} from '@/api/manage';
  import JDate from '@/components/jeecg/JDate.vue'
  import '@/assets/less/TableExpand.less'
  import JImageUpload from '../../components/jeecg/JImageUpload'
  import AddrukuDanGoodsModule from './modules/AddrukuDanGoodsModule'

  export default {
    name: "categoryinfo",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      JImageUpload,
      AddrukuDanGoodsModule
    },
    data () {
      return {
        rukudan_status:0,
        description: 'categoryinfo管理页面',
        tabs: 1,//切换框
        select_cangku:'请选择仓库',
        cangkuList:[],//仓库集合
        rukudan_code:'',
        create_By:'',
        create_time:'',
        cangku_userName:'',
        cangku_phone:'',
        cangku_address:'',
        caigou_depart:'',
        caigou_username:'',
        caigou_phone:'',
        caigou_remark:'',
        caigou_fileList:'',
        check_username:'',
        check_phone:'',
        check_remark:'',
        check_fileList:'',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'商品编号',
            align:"center",
            dataIndex: 'goodsCode'
          },
          {
            title:'供应商商品编号',
            align:"center",
            dataIndex: 'supplierGoodsCode'
          },
          {
            title:'批次/匹号',
            align:"center",
            dataIndex: 'batchName'
          },
          {
            title:'商品类型',
            align:"center",
            dataIndex: 'goodtypeName'
          },
          {
            title:'规格',
            align:"center",
            dataIndex: 'specificationsName'
          },
          {
            title:'尺码',
            align:"center",
            dataIndex: 'goodsSizeName'
          },
          {
            title:'入库数量',
            align:"center",
            dataIndex: 'incount'
          },
          {
            title:'库位信息',
            align:"center",
            dataIndex: 'locationName'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status',
            customRender:function (text) {
              if(text=='0'){
                return "待入库"
              }else {
                return "已入库"
              }
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width: 100,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
          list: "/inventory/manger/ruku_goods_peizhiPagelist?topId="+this.$route.query.rukudan_id+"&type=2",
          delete_leibie: "/admin/parameter/delete_category",
          query_allcankgu: "/location/configuration/query_allwarehouse",
          query_cankguDetail: "/location/configuration/query_warehouseById",
          submit_rukudan: "/inventory/manger/update_instorageDan",
          finish_rukudan: "/inventory/manger/finish_instorage_intokucun",//完成入库
          query_rukuDanDetail: "/inventory/manger/query_InstorageDanById",//入库详情
          edit_cate_staus: "/inventory/manger/change_instorageitems_status",
        }
      }
    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload;
      }
    },
    created () {
      this.showrukuDan_Detail();
    },
    methods: {
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      showrukuDan_Detail() {//查询入库单详情
        let params = {id:this.$route.query.rukudan_id};
        getAction(this.url.query_rukuDanDetail,params).then((res)=>{
          if(res.success) {
            this.rukudan_code=res.result.code;
            this.create_By=res.result.createBy;
            this.create_time=res.result.createTime;
            this.cangku_name=res.result.warehouseName;
            this.cangku_userName=res.result.contact;
            this.cangku_phone=res.result.contactPhone;
            this.cangku_address=res.result.address;
            this.caigou_depart=res.result.caigouDepart;
            this.caigou_username=res.result.caigouUsername;
            this.caigou_phone=res.result.caigouPhone;
            this.caigou_remark=res.result.caigouRemark;
            this.check_username=res.result.checkUsername;
            this.check_phone=res.result.checkPhone;
            this.check_remark=res.result.checkRemark;
            this.caigou_fileList = res.result.caigouImg;
            this.check_fileList = res.result.checkImg;
            this.rukudan_status = res.result.status;
            // setTimeout(() => {
            //   this.caigou_fileList = this.result.caigouImg;
            // }, 5)
            // setTimeout(() => {
            //   this.check_fileList = this.result.checkImg;
            // }, 5)
          }
        });
      },
      increase_data(record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "添加商品";
        this.$refs.modalForm.disableSubmit = true;
      },
      submit_instorageDan(){//提交入库单
        let params = {id:this.$route.query.rukudan_id,
          warehouseId:this.select_cangku,
          caigouDepart:this.caigou_depart,
          caigouUsername:this.caigou_username,
          caigouPhone:this.caigou_phone,
          caigouRemark:this.caigou_remark,
          caigouImg:this.caigou_fileList,
          checkUsername:this.check_username,
          checkPhone:this.check_phone,
          checkRemark:this.check_remark,
          checkImg:this.check_fileList
        };
        httpAction(this.url.submit_rukudan,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.$router.push({path:'/instorage/manger'})
          }else {
            this.$message.error(res.message);
          }
        });
      },

      finish_instorageDan(){//完成入库
        let params = {instorageDanId:this.$route.query.rukudan_id};
        httpAction(this.url.finish_rukudan,params,"post").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.$router.push({path:'/instorage/manger'})
          }else {
            this.$message.error(res.message);
          }
        });
      },

      back_top(){//取消
        this.$router.push({path:'/instorage/manger'})
      },
      set_reservoir(cangku_id){//配置库区
        this.$router.push({path:'/cangku/kuqu',query: {cangku_id:cangku_id}})
      },
      edit_data_status(id,status){//修改状态
        if(this.rukudan_status==2){
          this.$message.warning("该入库单已完成入库，不可再撤销")
          return;
        }else {
          let params = {id:id,status:status};
          httpAction(this.url.edit_cate_staus,params,"put").then((res)=>{
            if(res.success){
              this.$message.success(res.message);
              this.loadData();
            }else {
              this.$message.error(res.message);
            }
          });
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>